<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
</head>
<body>
<div id="app">
    <template>
        <div style="margin-bottom:18px;">
            <el-input style="width: 13%" v-model="queryForm.roleName" placeholder="角色名称"></el-input>
            <el-button @click="handleQuery">查询</el-button>
            <el-button v-if="button.add" @click="handleAdd">新增</el-button>
        </div>

        <el-table :data="tableData" :row-style="{height:'40px'}" :cell-style="{padding:'0px'}" style="font-size: 14px" border>
            <el-table-column type="index" label="序号" width="60"></el-table-column>
            <el-table-column prop="roleName" label="角色名称"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column label="操作" width="160">
                <template slot-scope="scope">
                    <el-button v-if="button.update" type="text" @click="handleUpdate(scope.row)">修改</el-button>
                    <el-button v-if="button.delete" type="text" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                       :page-sizes="[10, 50, 100]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </template>
</div>
</body>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>
<script>
    new Vue({
        el: '#app',
        data() {
			return {
			    currentPage: 1,
                pageSize: 10,
                total: 0,
                tableData: [],
				button: {
                    add: false,
                    update: false,
                    delete: false
                },
                queryForm: {
                    roleName: ''
                }
			}
        },
        created() {
            this.handleQuery();
			let sysButtons = JSON.parse(localStorage.getItem("jsbb-sysButtons"));
			this.button.add = sysButtons.indexOf("/sys/role/add") > -1;
			this.button.update = sysButtons.indexOf("/sys/role/update") > -1;
			this.button.delete = sysButtons.indexOf("/sys/role/delete") > -1;
        },
        methods: {
        	handleCurrentChange(val) {
                this.currentPage = val;
                this.handleQuery();
			},
			handleSizeChange(val) {
                this.pageSize = val;
                this.handleQuery();
            },
            handleQuery() {
                let queryParam = {
                    pageNo:this.currentPage,
                    pageSize:this.pageSize,
                    roleName:this.queryForm.roleName
                };
                service.post('/sys/role/list', queryParam)
                .then((res) => {
                    if (res.code == '0000') {
                        this.tableData = res.data.list;
                        this.total = res.data.count;
                    }
                });
            },
            handleDelete(row) {
                deleteById('/sys/role/delete/' + row.id, this);
            },
            handleAdd() {
                openPage('新增角色', '/sys/roleAdd/index', this);
            },
            handleUpdate(row) {
                openPage('修改角色', '/sys/roleUpdate/index?id=' + row.id, this);
            }
        }
    });
</script>
</html>
